<!-- 工作台 -->
<template>
  <div class="home">
    <div class="header"><h4>天府小区</h4></div>
    <!-- 数据总数 -->
    <div class="totalNumber">
      <div class="totalNumber-item">
        <div class="totalNumber-item-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="totalNumber-item-msg">
          <span>住户总数量</span>
          <p>{{tNum.houseHoldTotal}}</p>
        </div>
      </div>
      <div class="totalNumber-item">
        <div class="totalNumber-item-icon" style="background-color: #7262fd">
          <el-icon><OfficeBuilding /></el-icon>
        </div>
        <div class="totalNumber-item-msg">
          <span>房屋总数量</span>
          <p>{{tNum.houseTotal}}</p>
        </div>
      </div>
      <div class="totalNumber-item">
        <div class="totalNumber-item-icon" style="background-color: #ffaa00">
          <el-icon><Orange /></el-icon>
        </div>
        <div class="totalNumber-item-msg">
          <span>车位总数量</span>
          <p>{{tNum.parkingSpaceTotal}}</p>
        </div>
      </div>
      <div class="totalNumber-item">
        <div class="totalNumber-item-icon" style="background-color: #52c41a">
          <el-icon><Box /></el-icon>
        </div>
        <div class="totalNumber-item-msg">
          <span>设备总数量</span>
          <p>{{tNum.equipmentTotal}}</p>
        </div>
      </div>
    </div>
    <!-- 图表工具 -->
    <div class="utils">
      <div class="utils-left" id="eachart"></div>
      <div class="utils-right">
        <div class="utils-right-top">
          <p>便捷导航</p>
          <div class="utils-box">
            <a @click="go">新建住户</a>
            <a @click="go">新建住户</a>
            <a @click="go">新建住户</a>
            <a @click="go">新建住户</a>
            <a @click="go">新建住户</a>
            <a @click="go">新建住户</a>
            <!-- <el-button>+添加</el-button> -->
          </div>
        </div>
        <div class="utils-right-bottom">
          <p>备忘录</p>
          <el-input
            :rows="3"
            type="textarea"
            clearable
            v-model="remark"
            placeholder="请输入"
          />
        </div>
      </div>
    </div>
    <!-- 住户查询 -->
    <div class="search">
      <div class="search-title">住户查询</div>
      <div class="search-box">
        <div class="search-box-left">
          <span>住户类型/住户名字查询</span>
          <el-input
            v-model="searchType"
            placeholder="请输入住户类型"
            clearable
          />
          <el-input
            v-model="searchName"
            placeholder="请输入住户名字"
            clearable
          />
        </div>
        <div class="search-box-right">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" plain @click="reset">重置</el-button>
          <el-button type="primary" plain @click="batchDel">批量删除</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column prop="serialNo" label="序号" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="type" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center" />
        <el-table-column
          prop="identificationNumber"
          label="证件号码"
          width="200"
          align="center"
        />
        <el-table-column prop="phoneNumber" label="手机号码" align="center" />
        <el-table-column prop="room" label="房间" align="center" />
        <el-table-column label="操作" width="250" align="center">
          <template #default="scope">
            <el-button type="primary" text @click="audit">审核</el-button>
            <el-button type="primary" text @click="edit">编辑</el-button>
            <el-button type="primary" text @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Page from "../../components/Page.vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../router";
import * as echarts from "echarts";
let searchName = ref();
let searchType = ref();
let remark = ref();
let total = ref(0);
let page = ref(1);
let count = ref(5);
let tableData = ref([]);
let tNum = ref({});

const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  // console.log(val)
  multipleSelection.value = [];
  val.forEach((v) => {
    multipleSelection.value.push(v.id);
  });
};

// 获取总数据
let getAllData = () => {
  http({
    url: "/journal/list",
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      tNum.value = data.data;
    }
  });
};

// 渲染函数
let getData = () => {
  http({
    url: "/householdManagement/list",
    params: {
      page: page.value,
      limit: count.value,
      type: searchType.value,
      name: searchName.value,
    },
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      tableData.value = data.data.list;
      total.value = data.data.totalCount;
    }
  });
};

//搜索
let search = () => {
  getData();
};

//重置
let reset = () => {
  searchType.value = "";
  searchName.value = "";
  page.value = 1;
  getData();
};
//删除
let del = (index) => {
  http({
    url: "/householdManagement/delete",
    method: "DELETE",
    data: [index],
  }).then(({ data }) => {
    // console.log(data)
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getData();
    } else {
      ElMessage.error("删除失败");
    }
  });
};
//批量删除
let batchDel = () => {
  http({
    url: "/householdManagement/delete",
    method: "DELETE",
    data: multipleSelection.value,
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getData();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

let audit = () => {
  router.replace("/home/HouseholdDetails");
};

let edit = () => {
  router.replace("/home/NewHouseholds");
};

let go = () => {
  router.push("/home/NewHouseholds");
};

// eachart
onMounted(() => {
  let chartDom = document.getElementById("eachart");
  let myChart = echarts.init(chartDom);
  let option;

  option = {
    xAxis: {
      type: "category",
      data: ["11-01", "11-02", "11-03", "11-04", "11-05", "11-06", "11-07"],
    },
    yAxis: {
      type: "value",
      name: "近一周报修量趋势",
      min: 0,
      max: 500,
    },
    series: [
      {
        data: [100, 200, 224, 418, 335, 147, 260],
        type: "line",
        areaStyle: {},

        label: {
          show: true,
          position: "bottom",
          textStyle: {
            fontSize: 10,
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);

  getData();
  getAllData();
});
</script>

<style scoped lang="less">
.home {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  .header,
  .totalNumber,
  .utils,
  .search {
    margin-bottom: 20px;
    background-color: #f0f2f5;
  }
  .header {
    background-color: #f0f2f5;
  }
  .totalNumber {
    height: 12%;
    display: flex;
    justify-content: space-between;
    .totalNumber-item {
      width: 23%;
      height: 100%;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      .totalNumber-item-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1890ff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-left: 16px;
      }
      .totalNumber-item-msg {
        margin-left: 10px;
        span {
          color: #929292;
        }
        p {
          font-size: 30px;
          font-weight: 540;
        }
      }
    }
  }
  .utils {
    height: 48%;
    display: flex;
    justify-content: space-between;
    .utils-left {
      height: 100%;
      width: 64%;
      background-color: #ffffff;
    }
    .utils-right {
      width: 34%;
      height: 100%;
      background-color: #f0f2f5;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .utils-right-top {
        height: 47%;
        background-color: #ffffff;

        .utils-box {
          padding: 10px 20px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          a {
            text-decoration: none;
            height: 40px;
            margin-left: 6px;
            width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .el-button {
            margin-left: 14px;
          }
        }
      }
      .utils-right-bottom {
        height: 47%;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
          margin-bottom: 8px;
        }
      }
    }
  }
  .search {
    height: 56%;
    background-color: #ffffff;
    padding: 20px;
    .search-title,
    .search-box {
      margin-bottom: 10px;
    }
    .search-box {
      display: flex;
      justify-content: space-between;
      .search-box-left {
        display: flex;
        align-items: center;
        span {
          width: 380px;
          font-size: 14px;
        }
        .el-select,
        .el-input,
        .el-button {
          margin-left: 10px;
        }
      }
    }
    .table {
      display: flex;
      justify-content: center;
      text-align: center;
    }
  }
  .page {
    display: flex;
    justify-content: center;
  }
}
</style>
